<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/css/bootstrap.css"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/font-awesome/css/font-awesome.min.css"> 
        <script src="../libs/AdminLTE-2.4.18/bower_components/jquery/dist/jquery.js"></script>
        <script src="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../libs/sdk/date.js"></script>
        <script src="../libs/sdk/json.js"></script>
        <script src="../libs/sdk/hhls.js"></script>
        <script src="../libs/sdk/hhIotGateway.js"></script>
        <script src="../libs/sdk/kurento-client.js"></script>
        <script src="../libs/sdk/kurento-utils.js"></script>
        <script src="js/clientUtils.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    
        <title>专家支持</title>

    </head>
    <body>
        <style>
            html , body , .app{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #111; color: #fafafa;}
            ul{ padding: 0; margin: 0; list-style: none;}

            .app{ position: relative; overflow: hidden;}
            #rv{ position: absolute; width:100%; height: 100%; object-fit: cover ; z-index: 99; left: 0; top: 0;}
            #lv{ position: absolute; width:20%; height: 20%; object-fit: cover ; z-index: 999; left: 0; bottom: 0; background-color: #111;}
            ul.lstBtn{ position: absolute; right: 20px; top: 50%; transform: translate(10%, -50%); z-index: 9999;}
            ul.lstVideo{ position: absolute; left: 20px; top: 50px;   z-index: 9999;}
            ul.lstVideo li{ padding: 10px 5px;  background-color: #111; text-align: center;}
            .divTitle{ position: absolute; height: 40px;line-height: 40px; padding: 0px 20px; border-radius: 20px; background-color: rgba(0,0,0,0.5); top: 20px; left: 50%; transform: translate(-50%); z-index: 9999;}


        </style> 
        <style>
            .divHeader{ 
                position: fixed;
                top: 0;
                width: 100%;
                padding: 10px;
                z-index: 99;
            }
            ul.lstRoute{
                
            }
            ul.lstRoute li{
                float: left;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
            }

            .divMain{
                padding: 15px;
                padding-top: 65px;
            }
        </style>
        <div class="app" id="pusher">   
                <div class="divHeader">
                    <ul class="lstRoute clearfix">
                        <li @click="onPick" data-k='a1'>a1</li>
                        <li @click="onPick" data-k='a2'>a2</li>
                        <li @click="onPick" data-k='a3'>a3</li>
                        <li @click="onPick" data-k='a4'>a4</li>
                    </ul>
                </div>
                <div class="divMain">
                    <p>
                        <router-view></router-view>
                    </p>
                </div>
        </div>
        <script> 
            var manager={
                tmpDatas:{},
                routes:{},
                registRoute( key , tmpHtml){
                    var me = manager;
                    try{
                        var comp = {                            
                            template: tmpHtml ,
                            data(){
                                return {
                                    tmpKey : key,
                                    tmpData: {}
                                }
                            },
                            mounted(){
                                var tmpData = manager.tmpDatas[this.key];
                                tmpData = ( tmpData && tmpData!=null)?tmpData:{};
                                this.tmpData = tmpData;
                            }
                        }
                    }
                    catch(er){
                        console.log(er)
                    }
                },
                go(vueObj , routeKey , data){
                    try{
                        manager.tmpDatas[routeKey] = data;
                        var rk = routeKey.indexOf("/")==0?routeKey:"/"+routeKey;
                        vueObj.$router.push("/"+rk);
                    }
                    catch(er){
                        console.log(er);
                    }
                }
            }
            

            info = {
                name:"my name" ,
                desc:' desc info',
                num:22
            }
            const a1 = { 
                created(){
                    this.tm = ( new Date()).getTime();
                },
                mounted(){
                    this.tm = ( new Date()).getTime();
                },
                template: '<div>a1 foo {{info.name}} -- {{tm}}</div>' ,
                data(){
                    return {
                        info: info ,
                        tm: 0
                    }
                }
            }
            const a2 = { template: '<div>a2 {{desc}} bar</div>' ,data(){return info}}
            const a3 = { template: '<div>a3 {{name}}bar</div>' ,data(){return info}}
            const a4 = { template: '<div>a4 {{num}} bar</div>' ,data(){return info}}
                        
            const routes = [
                { path: '/a1', component: a1 },
                { path: '/a2', component: a2 },
                { path: '/a3', component: a3 },
                { path: '/a4', component: a4 }
            ]

            const router = new VueRouter({
                routes // （缩写）相当于 routes: routes
            })
 
            var app = new Vue({
                el:"#pusher",
                router:router,
                created(){
                    var me = this;
                    try{   
                    }
                    catch(er){
                        console.log(er);
                    }
                },
                data(){
                    return {  
                        info:{
                            name:"---------y name" ,
                            desc:'--------- desc info',
                            num:100022
                        }
                    }
                },
                methods:{ 
                    onPick(event){
                        var me = this;
                        var k = event.currentTarget.dataset.k;
                        console.log(k);
                        var rts = {};
                        me.$router.options.routes.forEach(
                            item=>{
                                rts[item.path] = item.component;
                            }
                        )
                        rts["/"+k].info = me.info;
                        var com = rts["/"+k];
                        console.log(com);
                        me.$router.push(k)
                    }
                }

            })
        </script>
    </body>
</html>